import * as React from 'react'
import ListItem from './list-item'
import { ListItemEvents, ToShowInterface } from './list-item'
export interface ListProps extends ListItemEvents {
  todos: Array<ToShowInterface>
}

export default (props: ListProps) => {
  const list = props.todos.map((todo, index) => {
    return (
      <ListItem
        key={index}
        index={index + 1}
        todo={todo}
        onClickDelButton={props.onClickDelButton}
        switchListItemEditStatus={props.switchListItemEditStatus}
        onClickSaveButton={props.onClickSaveButton}
        switchListItemCompleteStatus={props.switchListItemCompleteStatus}
      />
    )
  })
  return <div>{list}</div>
}
